<!DOCTYPE html>
<html class="loading" lang="en" data-textdirection="ltr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
  <meta name="author" content="PIXINVENT">
  <title>自助售货管理后台</title>
  <link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
  <link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
</head>

<body>
  <div class="content-wrapper">
    <div class="content-header ">
      <div class="content-header-left mb-2">
        <h3 class="content-header-title mb-0">角色管理</h3>
      </div>
    </div>
    <div class="card">
      <div class="card-content">
        <div class="card-body">

          <div class="funcbtn clearfix">
            <div class="pull-left"><a class="btn btn-info" href="#" data-toggle="modal" data-target="#myModal">添加供应商</a>
            </div>
          </div>
          <!-- 添加搜索表单 -->
          <div class="search-box clearfix" style="margin-bottom: 20px;">
            <div class="col-md-3 pull-left">
              <input type="text" id="searchUsername" class="form-control" placeholder="供应商名称">
            </div>
            <div class="col-md-3 pull-left">
              <input type="text" id="searchContactName" class="form-control" placeholder="联系人名称">
            </div>
            <div class="col-md-3 pull-left">
              <input type="text" id="searchContactPhone" class="form-control" placeholder="联系人电话">
            </div>
            <div class="col-md-2 pull-left">
              <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
            </div>
          </div>
          <div class="tablebox1">
            <table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>供应商名称</th>
                  <th>联系人姓名</th>
                  <th>联系电话</th>
                  <th>电子邮箱地址</th>
                  <th>地址</th>
                  <th>创建时间</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="employeesTableBody">

              </tbody>
            </table>

            <div class="page clearfix">
              <div id="pageTotal"></div>
              <div class="pull-right">

                <nav aria-label="...">
                  <ul class="pagination" id="pageButton">
                    <!-- 分页按钮 -->
                  </ul>
                </nav>
                <select class="form-control form-control-sm" style="width: 100px;" id="pageSizeSelect">
                  <option value="5">5条每页</option>
                  <option value="10">10条每页</option>
                  <option value="20">20条每页</option>
                </select>
              </div>
              <div class="d-flex align-items-center">
                <span class="me-2">跳至</span>
                <input type="text" class="form-control form-control-sm" style="width: 50px;" value="1">
                <span class="ms-2">页</span>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
  </div>

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="handleInput()"><span
              aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">供应商信息</h4>
        </div>
        <div class="modal-body">
          <div class="form1 form2">
            <ul class="row">
              <li class="col-xs-20" id="IdSpan"><span>供应商id</span>
                <input type="text" class="form-control" value=" " name="supplierId" readonly>
              </li>
              </li>
              <li class="col-xs-20"><span>供应商名称：</span>
                <input type="text" class="form-control" value=" " name="supplierName">
              </li>

              <li class="col-xs-20"><span>联系人姓名：</span>
                <input type="text" class="form-control" value=" " name="contactName">
              </li>
              <li class="col-xs-20"><span>联系电话：</span>
                <input type="text" class="form-control" value=" " name="contactPhone">
              </li>
              <li class="col-xs-20"><span>电子邮箱地址：</span>
                <input type="text" class="form-control" value=" " name="email">
              </li>
              <li class="col-xs-20"><span>地址：</span>
                <input type="text" class="form-control" value=" " name="address">
              </li>
              <li class="col-xs-20"><span>密码：</span>
                <input type="password" class="form-control" value="" name="password">
              </li>
              </li>


            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal" onclick="handleInput()">取消</button>
          <button type="button" class="btn btn-primary" onclick="addEmployees()">保存</button>
        </div>
      </div>
    </div>
  </div>





  <script src="app-assets/js/vendors.min.js" type="text/javascript"></script>
  <script src="app-assets/js/app-menu.js" type="text/javascript"></script>
  <script src="app-assets/js/app.js" type="text/javascript"></script>
  <script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
  <script>
    let QueryData = {
      pageNum: 1, //当前页
      pageSize: 5, //每页显示的条数
      supplierName:"", //供应商名称
      contactName:"", //联系人姓名
      contactPhone:"" //联系人电话
    };
    //页面加载时候
    $(function () {
      $('#IdSpan').hide();
      getList();
    })
    //获取员工列表
    function getList() {
      $.ajax({
        type: "POST",
        url: "http://localhost:25080/suppliers/getSupplierPage",
        headers: {
          "Content-Type": "application/json", // ✅ 必须设置
        },
        data: JSON.stringify(QueryData),
        dataType: "json",
        success: function (data) {
          console.log(data);
          renderList(data);
          pageButton(data);
        }
      });
    }
    //搜索员工
    function search() {
      QueryData.supplierName = $("#searchUsername").val().trim();
      QueryData.contactName = $("#searchContactName").val().trim();
      QueryData.contactPhone = $("#searchContactPhone").val().trim();
      getList();
    }

    //渲染所读取的数据
    function renderList(data) {
      if (data.code == 200) {
        $("#employeesTableBody").empty();
        data.data.list.forEach(data => {
          let row = `<tr>
                <td>${data.supplierId}</td>
                <td>${data.supplierName}</td>
                <td>${data.contactName}</td>
                <td>${data.contactPhone}</td>
                <td><span class="text-success">${data.email}</span></td>
                <td>${data.address}</td>
                <td>${data.createAt}</td>
                <td>
                <div class="setbox">
                          <p>选择操作</p>
                    <div class="setlist"> 
                        <a href="" data-toggle="modal" data-target="#myModal" onclick="updateEmployees(${data.supplierId})" >修改</a> 
                        <a href="" data-toggle="modal" data-target="#myModal1" onclick="resetPassword(${data.supplierId})">重置密码</a> 
                        <a href="">删除</a>
                    </div>
                </div>
					      </td>
				      </tr>`
          $("#employeesTableBody").append(row);
        });
      }
    }


    //渲染分页按钮
    function pageButton(data) {
      console.log(data);
      if (data.code == 200) {
        $("#pageButton").empty();
        let button = `<li class="${data.data.pageNum === 1 ? "disabled" : ""}"><a href="#" aria-label="Previous" onclick="previousPage()"><span aria-hidden="true">«</span></a></li>`
        $("#pageButton").append(button);
        for (let i = 1; i <= data.data.pages; i++) {
          let button = `<li ${data.data.pageNum === i ? 'class="active"' : ''}><a href="#" onclick="pageButtonClick(${i})">${i}</a></li>`
          $("#pageButton").append(button);
        }

        button = `<li class="${data.data.pageNum === data.data.pages ? "disabled" : ""}"><a href="#" aria-label="Next" id="nextPage" onclick="nextPage()"><span aria-hidden="true" >»</span></a></li>`
        $("#pageButton").append(button);
        $("#pageTotal").text(`共 ${data.data.total} 条记录 第 ${data.data.pageNum } / ${data.data.pages} 页`);
        QueryData.pageTotal = data.data.pages;
      }
    }

    //点击按钮
    function pageButtonClick(pageNum) {
      QueryData.pageNum = pageNum;
      getList();
    }
    //点击上一页
    function previousPage() {
      if (QueryData.pageNum <= 1) {
        return;
      }
      if (QueryData.pageNum > 1) {
        QueryData.pageNum--;
        getList();

      }
    }
    //点击下一页
    function nextPage() {

      if (QueryData.pageNum < QueryData.pageTotal) {
        QueryData.pageNum++;
        getList();
      }

    }

    //每页显示多少条
    $("#pageSizeSelect").change(function () {
      QueryData.pageSize = $(this).val();
      QueryData.pageNum = 1; //重置为第一页
      getList();
    });

    //跳至某页
    $("input[type='text']").on('keypress', function (e) {
      if (e.which == 13) { // Enter key pressed
        let page = parseInt($(this).val()); //获取这个对象的值
        if (!isNaN(page) && page >= 1 && page <= QueryData.pageTotal) {
          QueryData.pageNum = page;
          getList();
        } else {
          alert("请输入正确的页码");
        }
      }
    });

    //添加员工
    function addEmployees() {
      console.log($('input[name="password"]').val().trim());
      $.ajax({
        type: "POST",
        url: "http://localhost:25080/suppliers/editSupplier",
        headers: {
          "Content-Type": "application/json", // ✅ 必须设置
        },
        data: JSON.stringify({
          supplierId: $('input[name="supplierId"]').val().trim(),
          supplierName: $('input[name="supplierName"]').val().trim(),
          contactName: $('input[name="contactName"]').val().trim(),
          contactPhone: $('input[name="contactPhone"]').val().trim(),
          email: $('input[name="email"]').val().trim(),
          address: $('input[name="address"]').val().trim(),
          password: $('input[name="password"]').val().trim(),
        }),
        dataType: "json",
        success: function (data) {
          console.log(data);
          if (data.code == 200) {
            alert("处理成功");
            handleInput();
            getList();
          } else {
            alert(data.message);
          }
        }
      })
    }
    //处理输入框
    function handleInput() {
      $('#IdSpan').hide();
      $('input[name="supplierId"]').val("");
      $('input[name="supplierName"]').val("");
      $('input[name="contactName"]').val("");
      $('input[name="contactPhone"]').val("");
      $('input[name="email"]').val("");
      $('input[name="address"]').val("");
      $('input[name="password"]').val("");
      $('#myModal').modal('hide');

    }
    //修改员工
    function updateEmployees(supplierId) {
      $('#IdSpan').show();
      $('input[name="supplierId"]').val(supplierId);
      $.ajax({
        type: "GET",
        url: `http://localhost:25080/suppliers/getSupplierById/${supplierId}`,
        headers: {
          "Content-Type": "application/json", // ✅ 必须设置
        },
        dataType: "json",
        success: function (data) {
          console.log(data);
          if (data.code == 200) {
            $('input[name="supplierId"]').val(data.data.supplierId);
            $('input[name="supplierName"]').val(data.data.supplierName);
            $('input[name="contactName"]').val(data.data.contactName);
            $('input[name="contactPhone"]').val(data.data.contactPhone);
            $('input[name="email"]').val(data.data.email);
            $('input[name="address"]').val(data.data.address);  
            $('input[name="password"]').val(data.data.password);
          } else {
            alert(data.message);
          }
        }
      })
    }
    //重置密码
    function resetPassword(employeeId) {
      $.ajax({
        type: "GET",
        url: `http://localhost:25080/employees/resetPassword/${employeeId}`,
        headers: {
          "Content-Type": "application/json", // ✅ 必须设置
        },
        dataType: "json",
        success: function (data) {
          console.log(data);
          if (data.code == 200) {
            alert("处理成功");
          }
        }
      })
    }


  </script>
</body>

</html>